<template>
    <div>
        <div class="title"> §细项配置</div>
        <br>
        <div class="search">
            细项搜索：<input type="text" v-model="value" placeholder="请输入名称/关键词">
            <button @click="returnAll">返回</button>
            <button @click="searchDetailsInfo">搜索</button>
        </div>
        <div>
            <button @click="bulkDetetion" class="bulk-detetion">批量删除</button>
            <button @click="addInfo" class="add-info">+ 添加</button>
        </div>
        <br>
        <!-- 初始数据渲染 -->
        <el-table
        :data="tableData"
        border
        :row-style="{height: '0'}"
        style="width: 100%;">
            <el-table-column
                class="table-column"
                fixed
                prop="detailsId"
                label="ID"
                width="60">
            </el-table-column>
            <el-table-column
                prop="detailsName"
                label="细项名称"
                width="110">
            </el-table-column>
            <el-table-column
            prop="cyDepartment.departmentName"
            label="所属科室"
            width="80">
            </el-table-column>
            <el-table-column
                prop="detailsUnit"
                label="计量名称"
                width="100">
            </el-table-column>
            <el-table-column
                prop="detailsUp"
                label="上限值"
                width="80">
            </el-table-column>
            <el-table-column
                prop="detailsDown"
                label="下限值"
                width="80">
            </el-table-column>

            <el-table-column
                prop="detailsIsStatus"
                label="是否启用"
                width="80">
            <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.detailsIsStatus"
                    :active-value="1"
                    :inactive-value="2"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="changeStatus(scope.row)">
                </el-switch>
            </template>
            </el-table-column>
            <el-table-column
                prop="detailsUpdateTime"
                label="更新时间"
                width="160">
            </el-table-column>
            <el-table-column
                prop="detailsCreateTime"
                label="创造时间"
                width="160">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
                <template slot-scope="scope">
                    <el-button @click="alterClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="open(scope.row)" style="color:red" type="text" size="small">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            @current-change="handleCurrentChange"  
            :current-page="page.currentPage" 
            :page-size="page.pageSize"
            layout="prev, pager, next"
            :total="page.total"
            >
        </el-pagination>
        <!-- 修改细项内容 -->
        <el-dialog 
            title="修改细项" 
            :show-close="false"
            :visible.sync="dialogVisible"
            width="500px"
            >
            
            <el-form ref="form" :model="nowDetails" label-width="80px">
                <el-form-item label="细项id:" class="custom-item">
                    <div style="float:left">{{nowDetails.detailsId}}</div>
                    
                </el-form-item>
                <el-form-item label="细项名称" class="custom-item">
                    <el-input v-model="nowDetails.detailsName"></el-input>
                </el-form-item>
                <el-form-item label="计量名称" class="custom-item">
                    <el-input v-model="nowDetails.detailsUnit"></el-input>
                </el-form-item>
                <el-form-item label="上限值" class="custom-item">
                    <el-input v-model="nowDetails.detailsUp"></el-input>
                </el-form-item>
                <el-form-item label="下限值" class="custom-item">
                    <el-input v-model="nowDetails.detailsDown"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="sureCommit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 批量删除 -->
        <el-dialog 
            title="批量删除" 
            :show-close="false"
            :visible.sync="deteleVisible"
            width="500px"
            >
            <template >
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="checkedDetails">
                    <el-checkbox class="el-checkbox-width" v-for="detail in detailsOptions" :label="detail" :key="detail">{{detail}}</el-checkbox>
                </el-checkbox-group>
                <el-button class="deleteBtn" @click="commitBelete">确定</el-button>
                <el-button class="deleteBtn" @click="cancelCommit">取消</el-button>
            </template>
        </el-dialog>
        <!-- 添加 -->
        <el-dialog title="添加细项" width="40%" :visible.sync="dialogFormVisible">
            <el-form :model="form" status-icon :rules="rules" ref="form">
                <el-form-item label="细项名称" prop="detailName" :label-width="formLabelWidth">
                    <el-input v-model="form.detailName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属科室id" prop="fatherDepartId" :label-width="formLabelWidth">
                    <el-input v-model="form.fatherDepartId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="细项单位" prop="detailUnit" :label-width="formLabelWidth">
                    <el-input v-model="form.detailUnit" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="上限" prop="detailUp" :label-width="formLabelWidth">
                    <el-input v-model="form.detailUp" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="下限" prop="detailDown" :label-width="formLabelWidth">
                    <el-input v-model="form.detailDown" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" :label-width="formLabelWidth">
                    <el-radio v-model="status" label="1">是</el-radio>
                    <el-radio v-model="status" label="2">否</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form')">重 置</el-button>
                <el-button type="primary" @click="addCommit">确 定</el-button>
            </div>
    </el-dialog>
    </div>
</template>
<script>
    const detailsOptions = []
    export default{
        data(){
            return{
                checkAll: false,
                checkedDetails: [],//已经选择的
                detailsOptions: detailsOptions,//可选择的项
                isIndeterminate: true,
                deteleVisible:false,
                dialogVisible:false,
                tableData:[],
                value: "",
                nowDetails:{
                    detailsId:0,
                    detailsName:"",
                    detailsUnit:"",
                    detailsUp:"",
                    detailsDown:""
                },
                page:{
                    currentPage: 1,  
                    pageSize:5,
                    total:0
                },
                dialogFormVisible: false,
                form: {
                    detailName: '',
                    fatherDepartId: '',
                    detailUnit: '',
                    detailUp: '',
                    detailDown: '',
                },
                status: '1',
                formLabelWidth: '120px',
                isSearch:0,
                rules:{
                    detailName:[
                        { required: true, message: '请输入账号',  trigger: 'blur' }
                    ],
                    fatherDepartId:[
                        { required: true, message: '请输入账号',  trigger: 'blur' }
                    ],
                    detailUnit:[
                    { required: true, message: '请输入账号',  trigger: 'blur' }
                    ],
                    detailUp:[
                    { required: true, message: '请输入账号',  trigger: 'blur' }
                    ],
                    detailDown:[
                    { required: true, message: '请输入账号',  trigger: 'blur' }
                    ],
                }
            }
        },
        
        created(){
            this.getAllDetails();
        },
    methods:{
        getAllDetails(){
            this.$axios.post(
                '/details/getAllDetails',
                {
                    pageCurr:this.page.currentPage,  
                    pageSize:this.page.pageSize,
                }
            ).then(res =>{
                if(res != undefined){
                    if(res.code == 1){
                        console.log("细项列表",res)
                        this.tableData = res.data.list
                        this.page.total = res.data.totalSize
                        this.getAllDetailsName();
                    }else{
                        alert("服务器出错")
                    }                    
                }

                
            })
        },
        getAllDetailsName(){
            this.$axios.post(
                '/details/getAllDetailsName',
            ).then(res =>{
                if(res != undefined){
                    // cityOptions = res.data
                    console.log("细项名称",res)
                    if(detailsOptions.length!=0){
                        detailsOptions.length = 0;    
                    }
                    for(const item of res.data){
                        detailsOptions.push(item)
                    }                
                }

            })
        },
        handleCurrentChange(newPage) {  
            // console.log(`当前页码变更为：${newPage}`);  
        //    在这里可以根据新的页码进行数据的加载或其他操作  
            this.page.currentPage = newPage; // 更新当前页码，如果需要进行页面数据更新的话  
        // 例如，你可能需要发送一个请求来获取新页码对应的数据  
            if(this.isSearch == 0){
                this.getAllDetails();
            }else if(this.isSearch == 1){
                this.searchDetailsInfo();
            }
        },
        changeStatus(row){
            console.log("row",row)
            this.$axios.get(
                '/details/changeStatus',
                {
                    params:{
                        proStatus:row.detailsIsStatus,
                        detailsId:row.detailsId
                    }
                }
            ).then(res=>{
                console.log(res)
            })
            
        },
        deleteDetail(row){
            this.$axios.get(
                '/details/deleteDetail',
                {
                    params:{
                        detailsId:row.detailsId
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    if(res.code == 1){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    }else if(res.code == -1){
                        this.$message.error(res.msg);
                    }else{
                        this.$message.error("删除失败");
                    }                    
                }

                console.log("删除细项",res)
                this.getAllDetails(),
                this.getAllDetailsName()
            })
        },
        bulkDetetion(){
            this.deteleVisible = true
        },
        open(row) {
            this.$confirm('此操作将删除该细项, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.deleteDetail(row);
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
        alterClick(row) {
            this.nowDetails = row
            this.dialogVisible = true
        },
        cancel(){
            this.dialogVisible = false;
            this.getAllDetails();
        },
        sureCommit(){
            this.dialogVisible = false
            this.$axios.get(
                '/details/alterDetails',
                {
                    params:{
                        detailsId:this.nowDetails.detailsId,
                        detailsName:this.nowDetails.detailsName,
                        detailsUnit:this.nowDetails.detailsUnit,
                        detailsUp:this.nowDetails.detailsUp,
                        detailsDown:this.nowDetails.detailsDown
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    console.log("修改细项",res)
                    if(res.code == 2){
                        alert("暂未修改")
                    }else if(res.code == 1){
                        this.getAllDetails();
                        alert("修改成功")
                    }else{
                        alert("服务器出错，请稍后再来")
                    }                    
                }

            })
        },
        searchDetailsInfo(){
            this.isSearch == 1
            this.$axios.get(
                '/details/searchDetailsInfo',
                {
                    params:{
                        value:this.value,
                        pageCurr:this.page.currentPage,  
                        pageSize:this.page.pageSize,
                    }
                }
            ).then(res =>{
                if(res != undefined){
                    console.log("细项搜索",res)
                    this.tableData = res.data.list
                    this.page.total = res.data.totalSize                    
                }

            })
        },
        returnAll(){
            this.value = '',
            this.isSearch = 0;
            this.getAllDetails();
        },
        handleCheckAllChange(val) {
            this.checkedDetails = val ? detailsOptions : [];
            this.isIndeterminate = false;
        },
        cancelCommit(){
            this.deteleVisible = false;
            this.dialogFormVisible = false;
        },
        commitBelete(){
            console.log(this.checkedDetails)
            let params = "";
            for(var i = 0;i <this.checkedDetails.length;i++){
                if(i!=this.checkedDetails.length-1){
                    params = params + this.checkedDetails[i] + "，";
                }else{
                    params = params + this.checkedDetails[i]
                }
            }
            this.$axios.get(
                '/details/commitDelete',{
                    params:{
                        checkedDetails:params
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    if(res.code == 1){
                        this.deteleVisible = false;
                        this.$message({
                            message: '批量删除成功！',
                            type: 'success'
                        });
                        this.getAllDetails();
                        this.getAllDetailsName();
                    }else if(res.code == -1){
                        this.$message.error('项目包含该细项，无法删除！');
                    }
                    else {
                    this.$message.error('删除失败！');
                    }                    
                }

            })
        },
        addInfo(){
            this.dialogFormVisible=true;
        },
        // 重置表单内容
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        addCommit(){
            
            // 查询所属科室的id是否存在
            this.$axios.get(
                '/details/fatherDepartIdIsExist',
                {
                    params:{
                        fatherDepartId:this.form.fatherDepartId
                    }
                }
            ).then(res =>{
                if(res != undefined){
                    if(res.code == 1){
                        this.dialogFormVisible = false
                        this.addDetailCommit();
                    }else if(res.code == 0){
                        this.$message('当前的科室id不存在');
                    }else if(res.code == -1){
                        this.$message.error('科室id填写格式错误');
                    }                    
                }

            })
        },
        addDetailCommit(){
            this.$axios.get(
                '/details/addDetailCommit',
                {
                    params:{
                        detailName:this.form.detailName,
                        fatherDepartId: this.form.fatherDepartId,
                        detailUnit: this.form.detailUnit,
                        detailUp:this.form.detailUp,
                        detailDown: this.form.detailDown,
                        status:this.status
                    }
                }
                
            ).then(res=>{
                if(res != undefined){
                    if(res.code == 1){
                        this.$message({
                            message: '细项添加成功！',
                            type: 'success'
                        });
                    }else{
                        this.$message.error('添加失败！');
                    }                    
                }

            })
        }
    }
}
</script>

<style scoped>
.custom-item{
    height: 25px;
}
.detailsSearch{
    color: rgb(43, 137, 236);
    margin-bottom: 10px;
    position: relative;
    float: left;
    flex-direction: row;  
}

.searchBtn button:hover{
    cursor: pointer;
    background-color:rgb(125, 187, 249);
}


.deleteBtn{
    background-color: rgb(44, 143, 242);
    color:white;
}
.deleteBtn:hover{
    cursor: pointer;
    background-color: rgb(125, 187, 249);
}
@import "../../static/css/btnStyle.css"

</style>
